<template>
	<view class="content">
		<view class="a-search">
			<view class="a-address">
				<text>{{ city }}</text>
			</view>
			<view class="row">
				<text class="searchIcon"></text>
				<input class="inp" :placeholder="placeholder" v-model="address" @input="onInput" focus auto-focus />
				<image :src="clearIcon" class="icon_close" @tap="clear"></image>
			</view>
		</view>
		<view class="selectView">
			<view class="selectInput" v-for="(item, index) in list" :key="index" @tap="chooseAddress(item)">
				<view class="name">
					<image class="icon_ad" :src="icon_ad" mode="heightFix" />
					<text ref="name">{{ item.name }}</text>
				</view>
				<view class="address">{{ item.address }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholder: '地址/街道/酒店名/景点名',
				list: [],
				address: '',
				location: '',
				icon_dw: '../static/images/icon_dw.png',
				icon_ad: '../static/images/icon_ad.png',
				searchIcon: '../static/images/search.png',
				clearIcon: '../static/images/deleteIcon.png',
				city: '',
				cityCode: '',
			}
		},
		onLoad(options) {
			this.city = options.city; //默认北京市
			this.cityCode = options.cityCode; //默认北京市
		},
		methods: {
			onInput(e) {
				this.getLocationList(e.detail.value)
			},
			clear() {
				this.address = ''
			},
			getLocationList(keywords) {
				let _this = this
				uni.request({
					url: 'https://restapi.amap.com/v3/assistant/inputtips',
					data: {
						keywords: keywords,
						city: _this.city,
						citylimit: true,
						key: 'eeca91fd2e3b6dd5e084414659eae404',
					},
					success(ret) {
						if (ret && ret.data.tips) {
							let tips = ret.data.tips
							tips = tips.filter((tip) => {
								return tip.location && tip.location.length > 0 && tip.address && tip.address.length > 0
							})
							tips.forEach(tip => {
								// 拼接地址
								if (tip.address && tip.address.length > 0) {
									tip.address = tip.district + tip.address
								} else {
									tip.address = ''
								}
							});
							_this.list = tips
						}
					},
					fail(error) {
						console.log(error)
					},
				})
			},
			chooseAddress(item) {
				this.list = []
				let addressobj = {
					name: item.address || item.name,
					location: item.location,
				}
				uni.$emit('chooseAddress', addressobj)
				uni.navigateBack({
					delta: 1,
					animationDuration: 300,
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.b20 {
		margin-bottom: 20rpx;
	}

	::v-deep page {
		background-color: #fff !important;
	}

	.content {
		height: 100vh;
		padding: 16rpx 0rpx;
		background-color: #fff !important;
	}

	.a-search {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 16rpx 32rpx;

		.a-address {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #303133;
			font-size: 28rpx;
		}

		.row {
			margin-left: 16rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 24rpx;
			flex: 1;
			height: 80rpx;
			background: #f3f4f6;
			border-radius: 4rpx;

			.searchIcon {
				width: 48rpx;
				height: 48rpx;
				background-image: url(/static/images/search.png);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.inp {
				width: 100%;
				padding-left: 10rpx;
			}

			.icon_close {
				background-image: url(/static/images/deleteIcon.png);
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.selectView {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 1220rpx;
		overflow-y: auto;
		background: #ffffff;

		.selectInput {
			height: 124rpx;
			border-bottom: 1px solid #ebedf0;
			padding: 24rpx 32rpx 0 72rpx;
			position: relative;

			.icon_ad {
				height: 32rpx;
				width: 32rpx;
				position: absolute;
				left: 32rpx;
				top: 52rpx;
			}

			.name {
				font-size: 28rpx;
				font-weight: 700;
				color: #303133;
				padding-top: 4px;
				width: 500rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.address {
				font-size: 24rpx;
				color: #909399;
				display: block;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
				width: 546rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
</style>
